<template>
<div>
  <el-select
      filterable
      v-model="selectList"
      collapse-tags
      multiple
      clearable
      @change="e => changeSelect(e)"
  >
    <div class="checkboxWrapper">
      <el-checkbox v-model="checked" @change.native="checkChange">
        全选
      </el-checkbox>
    </div>
    <el-option
        v-for="item in optionsList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    >
    </el-option>
  </el-select>

 欢迎你
 <span class="iconfont icon-huanyingye"></span> <!--icon图标是在public/index.html引入的link   <link type="text/css" rel="stylesheet" href="//at.alicdn.com/t/font_567566_pwc3oottzol.css">-->
 <span class="iconfont icon-shujuzhanshi2"></span>

</div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      selectList: [],
      optionsList: [
        {
          value: 'Beijing',
          label: '北京'
        },
        {
          value: 'Shanghai',
          label: '上海'
        },
        {
          value: 'Nanjing',
          label: '南京'
        },
        {
          value: 'Chengdu',
          label: '成都'
        },
        {
          value: 'Shenzhen',
          label: '深圳'
        },
        {
          value: 'Guangzhou',
          label: '广州'
        }
      ]
    };
  },
  methods: {
    checkChange(e) {
      let resValues = this.optionsList.map(item => item.value);
      // 如果checkbox为false，则为反选，选择数组为空
      if (!e) {
        this.selectList = [];
      } else {
        // 如果checkbox为true，则为全选，选择数组添加所有数据
        let res = [...resValues];
        this.selectList = res;
      }
    },
    changeSelect(val) {
      let resValues = this.optionsList.map(item => item.value);
      // 如果选择数组长度等于options的长度，checkbox设为true，反之设为false
      if (val.length === resValues.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      this.selectList = val;
    }
  }
};
</script>
<style scoped>
.checkboxWrapper {
  padding: 8px 20px;
  border-bottom: 1px solid #ccc;
}
</style>
